<template>
  <view class="page">
    <!-- 顶部导航栏 -->
	<view class="header-background">
		<view class="top-bar">
		  <image src="../../static/icons/back(1).png" class="back-icon" @tap="goBack" />
		  <text class="title">客户护理（{{ customerName }}）</text>
		</view>

		<!-- 三个静态卡片：两列排版 -->
		<view class="main-buttons">
      <!-- 日常护理 -->
      <view class="button-item daily-button" @tap="onTap('daily')">
        <text class="text-title">日常护理</text>
        <view class="subtitle-icon-container">
          <text class="text-subtitle">日常护理记录填写</text>
          <image class="icon-image" src="../../static/icons/nurse.png" mode="aspectFill" />
        </view>
      </view>

      <!-- 外出申请 -->
      <view class="button-item out-button" @tap="onTap('out')">
        <text class="text-title">外出申请</text>
        <view class="subtitle-icon-container">
          <text class="text-subtitle">客户外出情况申请</text>
          <image class="icon-image" src="../../static/icons/out.png" mode="aspectFill" />
        </view>
      </view>

      <!-- 退住申请 -->
      <view class="button-item leave-button" @tap="onTap('leave')">
        <text class="text-title">退住申请</text>
        <view class="subtitle-icon-container">
          <text class="text-subtitle">客户退住申请</text>
          <image class="icon-image" src="../../static/icons/hospital.png" mode="aspectFill" />
        </view>
      </view>
    </view>
	</view>
  </view>
</template>


<script>
export default {
  data() {
    return {
      customerId: null,
      customerName: ''  // 最终拿到的姓名
    };
  },
  methods: {
    goBack() {
        uni.switchTab({
          url: '/pages/mycustomer/mycustomer'
        })
      },
    onTap(type) {
          console.log('点击了', type);
          let url = '';
          switch (type) {
            case 'daily':
              // 跳转到项目服务页面
              url = `/pages/customerProject/customerProject?customerId=${this.customerId}&customerName=${encodeURIComponent(this.customerName)}`;
              break;
            case 'out':
              // 外出申请页面
              url = `/pages/outRequest/outRequest?customerId=${this.customerId}&customerName=${encodeURIComponent(this.customerName)}`;
              break;
            case 'leave':
              // 退住申请页面
              url = `/pages/checkOutRequest/checkOutRequest?customerId=${this.customerId}&customerName=${encodeURIComponent(this.customerName)}`;
              break;
            default:
              return;
          }
          uni.navigateTo({ url });
        }
  },
  onLoad(options) {
      // options.id / options.name 都是字符串
      this.customerId = options.customerId;
      // 对 name 进行解码，防止中文乱码
      this.customerName = options.name
        ? decodeURIComponent(options.name)
        : '';
      
      console.log('路由参数 id=', this.customerId);
      console.log('路由参数 name=', this.customerName);
    },
};
</script>

<style scoped>
.page {
  background-color: #fafafa;
  height: 100vh;
}

.top-bar {
  display: flex;
  align-items: center;
  height: 50px;
  padding: 0 16px;
  width: 100%;
}
.back-icon {
  width: 24px;
  height: 24px;
}
.title {
  flex: 1;
  text-align: center;
  color: #fff;
  font-size: 18px;
  font-weight: 500;
}

/* 两列排版容器 */
.main-buttons {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  padding: 16px;
  gap: 16px; /* 项目间距 */
}

/* 按钮基类 */
.button-item {
  width: 90%; /* 两列，每列间隙留 16px，因此减 8px */
  border-radius: 12px;
  padding: 16px;
  color: #fff;
  position: relative;
}

/* 标题文字 */
.text-title {
  font-size: 30px;
  font-family: cursive;
  font-weight: bold;
  color: white;
  margin-top: 20px;
  margin-bottom: 5px;
}

/* 副标题和图标容器 */
.subtitle-icon-container {
  display: flex;
  flex-direction: row;  /* 将副标题和图标水平排列 */
  align-items: center;  /* 副标题和图标垂直居中对齐 */
  justify-content: space-between; /* 副标题靠左，图标靠右 */
  margin-top: 5px;
  width: 100%; /* 占满可用宽度 */
}

/* 副标题文字 */
.text-subtitle {
  font-size: 18px;
  color: white;
  margin-right: 10px; /* 副标题和图标之间留出空隙 */
  max-width: 55%;  /* 限制文字最大占据宽度 */
  flex-grow: 1; /* 使副标题占用多余空间，防止挤压到图标 */
  word-wrap: break-word; /* 超出宽度时换行 */
}

/* 图标样式 */
.icon-image {
  width: 70px;
  height: 70px;
  flex-shrink: 0; /* 防止图标被挤压 */
}

.header-background {
  top: 0;
  left: 0;
  width: 100%;
   background-image: url('/static/images/background1.png'); /* 使用绝对路径 */
  background-size: cover;
  background-position: left top;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  color: #fff;
  padding: 60px 0 0 0; /* 增加上边距，整体向下移动 */
  margin: 0;
}

/* 渐变背景色：日常、外出、退住 */
.daily-button {
  background: linear-gradient(to right, #fac95f, #feb051);
}
.out-button {
  background: linear-gradient(to right, #4ce894, #29e4a9);
}
.leave-button {
  background: linear-gradient(90deg, #2ec4d2 0%, #047dd6 100%);
}
</style>
